<template>
  <orderHeaderVue
    title="事项-列表"
    :dataShow="false"
    :hideShow="true"
    @clickCom="clickCom"
  />

  <div class="main_layout" id="mainLayout">
    <div class="client" id="client">
      <div class="crad" v-for="(item, index) in Data.arr" :key="index">
        <div class="crad_header">
          <div :style="{ color: item.Color }">
            <MailOutlined /> {{ item.Name }}
          </div>

          <div style="display: flex">
            <div @click="CreateThingsModel(item.Id)"><PlusOutlined /></div>
            <div
              @click="DeteleClass(item.Id)"
              style="margin-left: 2px; color: red"
            >
              <CloseOutlined />
            </div>
          </div>
        </div>

        <div class="crad_main">
          <div v-show="item.Matters.length == 0">
            <div class="No_info">当前暂无事项</div>
          </div>
          <div
            class="crad_item"
            @contextmenu.prevent="RightMenu($event, item)"
            v-for="(item, index) in item.Matters"
            :key="index"
          >
            <template v-if="item.State == 0">
              <a-radio
                v-model:checked="item.State"
                style="line-height: 40px"
                @click="check(item.Id, item.State)"
              >
              </a-radio>
              <div class="crad_info">
                <div style="font-size: 16px">{{ item.Name }}</div>
              </div>
            </template>

            <template v-if="item.State == 1 && !IfCom">
              <a-radio
                v-model:checked="item.State"
                style="line-height: 40px"
                @click="check(item.Id, item.State)"
              >
              </a-radio>
              <div class="crad_info">
                <div style="font-size: 16px">{{ item.Name }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <div
        class="crad_new"
        :style="{
          height: addThings == true ? '200px' : '40px',
        }"
        @click.stop="newThings()"
      >
        <div class="crad_header"><PlusOutlined /> 添加分类</div>
        <div class="crad_addings" v-show="addThings">
          <div class="input-layout">
            <span style="width: 80px">分类名称：</span>
            <div>
              <a-input
                placeholder="分类名称"
                v-model:value="Name"
                style="height: 30px; line-height: 35px"
              />
            </div>
          </div>

          <div class="input-layout">
            <span style="width: 80px">分类描述：</span>
            <div>
              <a-input
                placeholder="分类描述"
                v-model:value="Icon"
                style="height: 30px; line-height: 35px"
              />
            </div>
          </div>

          <div class="add-footer">
            <a-button @click="CreatClass()">创建</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="foot_layout" id="foot">
    <div class="foot_index" id="footIndex"></div>
  </div>

  <!-- 新建弹窗 -->
  <a-modal v-model:visible="CreateModel" title="新建事项" @ok="CreateThings()" okText='创建' cancelText='取消'>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="事项名称">
        <a-input v-model:value="formState.Name" />
      </a-form-item>
      <a-form-item label="起始时间">
        <a-range-picker v-model:value="date" value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="formState.Describe" />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 修改弹窗 -->
  <a-modal v-model:visible="EditModel" title="修改事项" @ok="EditThings()" okText='确定' cancelText='取消'>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="事项名称">
        <a-input v-model:value="formState.Name" />
      </a-form-item>
      <a-form-item label="起始时间">
        <a-range-picker v-model:value="date" value-format="YYYY-MM-DD" :placeholder="[formState.StartDate, formState.EndDate]"/>
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="formState.Describe" />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 右键菜单 -->
  <ul
    v-show="MenuVisible"
    class="contextmenu"
    :style="{
      left: Position.left + 'px',
      top: Position.top + 'px',
      display: visible1 ? 'block' : 'none',
    }"
  >
    <div class="item" @click="EditThingsModel()">编辑</div>
    <div class="item" @click="DeleteThings()">删除</div>
  </ul>
</template>

<script>
import {
  MailOutlined,
  PlusOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import orderHeaderVue from "../components/orderHeader.vue";
import { postJSON, get } from "../utils/request";
import dayjs from "dayjs";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    MailOutlined,
    PlusOutlined,
    CloseOutlined,
    orderHeaderVue,
  },
  setup() {
    var Data = reactive({
      arr: [],
    });
    const formState = reactive({
      Id: "",
      ClassificationId: "",
      Name: "",
      Describe: "",
      StartDate:"",
      EndDate:""
    });
    const date = ref(dayjs());

    // 控制新增分类判定
    const addThings = ref(false);
    const Name = ref("");
    const Icon = ref("");
    const Color = ref("#1890ff");
    const checked = ref("");
    const CreateModel = ref(false);
    const EditModel = ref(false);
    const IfCom = ref(false);

    onMounted(() => {
      //拖动进度条监听事件
      const footLayout = document.getElementById("foot");
      const footIndex = document.getElementById("footIndex");

      // 获得数据
      get("/allthings").then((res) => {
        Data.arr = res.data;
      });

      footLayout.addEventListener("mousedown", function (event) {
        // 获取按下时鼠标初始位置
        let X = event.pageX;

        // 进度条的初始位置
        const L = footIndex.offsetLeft;

        document.onmousemove = function (event) {
          // 获取移动的距离
          let diff = event.pageX - X;

          // 计算当前进度条位置
          let NextL = L + diff;

          // 阈值判断
          if (NextL > 230) {
            NextL = 230;
          } else if (NextL < 0) {
            NextL = 0;
          }

          // 联动main_layout内容
          // 获取父盒子宽度
          const target = document.getElementById("client");
          const max_width = document.getElementById("client").scrollWidth;
          const min_width = document.getElementById("client").offsetWidth;

          // 更新main布局样式
          if (max_width > min_width) {
            const rate = (max_width - min_width) / 230;
            target.style.left = -(NextL * rate) + "px";
          }

          // 更新DOM元素属性
          footIndex.style.left = NextL + "px";
        };
      });

      //当鼠标弹起的时候，不做任何操作
      document.onmouseup = function () {
        document.onmousemove = null;
      };

      // 监听下拉隐藏
      document.addEventListener("click", bodyCloseMenus);
    });

    // 编辑事件
    const MenuVisible = ref(false);
    const Position = ref({
      top: 0,
      left: 0,
    });
    const rightClickItem = ref("");

    const RightMenu = (e, item) => {
      Object.keys(formState).forEach((key) => {
        formState[key] = item[key];
      });
      MenuVisible.value = true;
      Position.value.top = e.pageY;
      Position.value.left = e.pageX;
      rightClickItem.value = item;
    };

    const closeMenu = () => {
      MenuVisible.value = false;
    };

    watch(MenuVisible, () => {
      if (MenuVisible.value) {
        document.body.addEventListener("click", closeMenu);
      } else {
        document.body.removeEventListener("click", closeMenu);
      }
    });

    // 是否显示已完成
    const clickCom = (val) => {
      IfCom.value = val;
      console.log("IfCom.value :>> ", IfCom.value);
    };

    // 新增分类
    const newThings = () => {
      addThings.value = true;
    };

    // 隐藏下拉框事件
    const bodyCloseMenus = () => {
      if (addThings.value == true) {
        Name.value = "";
        Icon.value = "";
        addThings.value = false;
      }
    };

    // 创建分类事件
    const CreatClass = () => {
      let params = {
        command: 1,
        Name: Name.value,
        Icon: Icon.value,
        Color: Color.value,
      };
      postJSON("/newClass", params).then((res) => {
        get("/allthings").then((res) => {
          Data.arr = res.data;
          Name.value = "";
          Icon.value = "";
          addThings.value = false;
        });
      });
    };

    // 创建事项弹窗
    const CreateThingsModel = (ID) => {
      formState.Name = '';
      formState.Describe = '';
      date.value[0] = '';
      date.value[1] = '';
      formState.ClassificationId = ID;
      CreateModel.value = true;
    };

    // 修改事项弹窗
    const EditThingsModel = () => {
      const ID = formState.Id;
      EditModel.value = true;
    };

    // 创建事项事件
    const CreateThings = (data) => {
      let params = {
        command: 1,
        ...formState,
        State: 0,
        StartDate: date.value[0],
        grade: 5,
        EndDate: date.value[1],
      };
      postJSON("/newthings", params).then((res) => {
        CreateModel.value = false;
        get("/allthings").then((res) => {
          console.log(res);
          Data.arr = res.data;
        });
      });
    };

    // 删除事项事件
    const DeleteThings = (data) => {
      let params = {
        command: 3,
        ...formState,
      };
      postJSON("/newthings", params).then((res) => {
        get("/allthings").then((res) => {
          console.log(res);
          Data.arr = res.data;
        });
      });
    };

    // 修改事项事件
    const EditThings = (data) => {
      let params = {
        command: 2,
        ...formState,
      };
      postJSON("/newthings", params).then((res) => {
        get("/allthings").then((res) => {
          EditModel.value = false;
          Data.arr = res.data;
        });
      });
    };

    // 点击单选框
    const check = (id, status) => {
      let params = {
        Id: id,
        Stu: status,
      };
      postJSON("/setMattersStu", params).then((res) => {
        get("/allthings").then((res) => {
          Data.arr = res.data;
        });
      });
    };

    // 删除分类
    const DeteleClass = (id) => {
      let params = {
        ID: id,
      };
      postJSON("DeleteClass", params).then((res) => {
        message.info(res.msg);
        get("/allthings").then((res) => {
          console.log(111111111);
          Data.arr = res.data;
        });
      });
    };

    return {
      Data,
      addThings,
      newThings,
      bodyCloseMenus,
      CreatClass,
      Name,
      Icon,
      CreateThingsModel,
      EditThingsModel,
      CreateThings,
      DeleteThings,
      EditThings,
      CreateModel,
      labelCol: { style: { width: "150px" } },
      wrapperCol: { span: 14 },
      formState,
      date,
      check,
      IfCom,
      clickCom,
      DeteleClass,
      MenuVisible,
      Position,
      rightClickItem,
      RightMenu,
      closeMenu,
      EditModel
    };
  },
});
</script>

<style lang="less" scoped>
.main_layout {
  height: calc(100% - 200px);
  margin: 0 20px;
  overflow-x: hidden;
  .client {
    height: 100%;
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
  }
  .crad {
    min-width: 300px;
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /* 设置card的背景色 */
    background: #ffffff;
    padding: 0 20px;
    margin: 5px;
    .crad_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      text-align: left;
      color: #1890ff;
    }
    .crad_main {
      padding-top: 12px;
      min-height: 100px;
      border-top: 1px solid #e7e5e5;
      .crad_item {
        height: 40px;
        display: flex;

        :deep(.ant-radio-inner::after) {
          content: " ";
          position: absolute;
          display: inline-block;
          border-radius: 0;
          width: 20px;
          height: 10px;
          border-width: 0 0 2px 2px;
          overflow: hidden;
          border-color: #1890ff;
          background: rgba(0, 0, 0, 0);
          border-style: solid;
          -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
          left: 50%;
          top: 35%;
        }
        .crad_info {
          line-height: 40px;
          text-align: left;
          width: 100%;
        }
      }
      .crad_item :hover {
        background-color: #f3fbfb;
      }
      .No_info {
        color: #bbbbbb;
      }
    }
  }
  .crad_new {
    min-width: 300px;
    height: var(--Heightt);
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /* 设置card的背景色 */
    background: #ffffff;
    margin: 5px;
    .crad_header {
      height: 40px;
      color: #1890ff;
      padding: 0 20px;
      line-height: 40px;
      text-align: left;
    }
    .crad_addings {
      height: 100px;
      margin: 0 20px;
      background: #ffffff;
      border-top: 1px solid #e7e5e5;
      .input-layout {
        display: flex;
        height: 50px;
        line-height: 50px;
      }
      .add-footer {
        display: flex;
        justify-content: end;
      }
    }
  }
}
.foot_layout {
  margin-top: 50px;
  height: 10px;
  width: 300px;
  border-radius: 30px;
  background-color: #f2f2f2;
  position: relative;
  left: calc(50% - 150px);
  .foot_index {
    height: 10px;
    width: 70px;
    position: relative;
    left: 0px;
    border-radius: 30px;
    background-color: #545455;
  }
}
.contextmenu {
  width: 100px;
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  left: 100px;
  top: 100px;

  .item {
    padding: 0 15px;
    height: 35px;
    width: 100%;
    line-height: 35px;
    color: rgb(29, 33, 41);
    cursor: pointer;
  }
  .item:hover {
    background: rgb(229, 230, 235);
  }
}
</style>